<template>
	<view>
		<!-- F1 tabbar 开始 -->
	<view>
		<v-tabs 
		v-model="activeTab" 
		:scroll="true" 
		:tabs="category"
		lineHeight="4rpx"
		activeColor="#3B3D46"
		color="#999CA3"
		lineColor="#3E9CF9"
		@change="changetab"
		/>
	</view>	
		<!-- F1 tabbar 结束 -->
		<!-- F2 商品列表 开始 -->
		<view v-show="activeTab==0">
			<!-- 选项卡1内容 开始 -->
			<view class="product-container">
				<view  class="item-box" v-for="(item,id) in list" :key='id'>
					<view class="item">
						<image :src="item.img" mode="widthFix"></image>
						<view>{{item.title}}</view>
						<view class="subtitle">{{item.subtitle}}</view>
					</view>
				</view>
			</view>
			<!-- 选项卡1内容 结束 -->
		</view>
		<view v-show="activeTab==1">
			<!-- 选项卡2内容 开始 -->
			<view class="product-container">
				<view  class="item-box" v-for="(item,id) in list" :key='id'>
					<view class="item">
						<image :src="item.img" mode="widthFix"></image>
						<view>{{item.title}}222</view>
						<view class="subtitle">{{item.subtitle}}222</view>
					</view>
				</view>
			</view>
			<!-- 选项卡2内容 结束 -->
		</view>
		<view v-show="activeTab==2">
			<!-- 选项卡3内容 开始 -->
			<view class="product-container">
				<view  class="item-box" v-for="(item,id) in list" :key='id'>
					<view class="item">
						<image :src="item.img" mode="widthFix"></image>
						<view>{{item.title}}333</view>
						<view class="subtitle">{{item.subtitle}}333</view>
					</view>
				</view>
			</view>
			<!-- 选项卡3内容 结束 -->
		</view>
		<view v-show="activeTab==3">
			<!-- 选项卡4内容 开始 -->
			<view class="product-container">
				<view  class="item-box" v-for="(item,id) in list" :key='id'>
					<view class="item">
						<image :src="item.img" mode="widthFix"></image>
						<view>{{item.title}}444</view>
						<view class="subtitle">{{item.subtitle}}444</view>
					</view>
				</view>
			</view>
			<!-- 选项卡4内容 结束 -->
		</view>
		<view v-show="activeTab==4">
			<!-- 选项卡5内容 开始 -->
			<view class="product-container">
				<view  class="item-box" v-for="(item,id) in list" :key='id'>
					<view class="item">
						<image :src="item.img" mode="widthFix"></image>
						<view>{{item.title}}555</view>
						<view class="subtitle">{{item.subtitle}}555</view>
					</view>
				</view>
			</view>
			<!-- 选项卡5内容 结束 -->
		</view>
		<view v-show="activeTab==5">
			<!-- 选项卡6内容 开始 -->
			<view class="product-container">
				<view  class="item-box" v-for="(item,id) in list" :key='id'>
					<view class="item">
						<image :src="item.img" mode="widthFix"></image>
						<view>{{item.title}}666</view>
						<view class="subtitle">{{item.subtitle}}666</view>
					</view>
				</view>
			</view>
			<!-- 选项卡6内容 结束 -->
		</view>
		<!-- F2 商品列表 结束 -->
		<wx-tabbar></wx-tabbar>
	</view>
</template>

<script>
	import wxTabbar from '@/components/wx-tabbar/wx-tabbar.vue';
	import { mapState,mapMutations } from 'vuex'
	export default {
		data() {
			return {
				activeTab:0,
				category:['精选', '水果', '蔬菜','家具','服饰','电器'],
				list:[
						{
							title:'本地枇杷',
							subtitle:'本地枇杷好吃无敌',
							img:require("@/static/image/agribusiness/product-1.png")
						},
						{
							title:'本地枇杷',
							subtitle:'本地枇杷好吃无敌',
							img:require("@/static/image/agribusiness/product-2.png")
						},
						{
							title:'本地枇杷',
							subtitle:'本地枇杷好吃无敌',
							img:require("@/static/image/agribusiness/product-3.png")
						}
				]
			};
		},
		onShow(option) {
			uni.hideTabBar()
			// 从分包界面返回到首页需要重新设置tabbar的index值
			this.changeTabBar({
				index: 1
			})
		},
		methods:{
			...mapMutations(['changeTabBar']),
			changetab(index){
				console.log('点击了：',index);
			},
			
			
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}
.product-container{
	display: flex;
	flex-wrap: wrap;
	.item-box{
		width: 50%;
		padding:20rpx 20rpx 20rpx 20rpx;
		.item{
			image{
				border-radius: 16rpx;
				width: 328rpx;
				height: 240rpx;
			}
			.subtitle{
				font-size: 22rpx;
				color: #AAAAAA;
			}
		}
	}
}
</style>
